<template>
  <view class="container">
    <!-- 电站图片 -->
    <swiper class="station-swiper" indicator-dots autoplay>
      <swiper-item v-for="(img, index) in stationDetail.images" :key="index">
        <image class="swiper-img" :src="img" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <!-- 电站基本信息 -->
    <view class="station-basic">
      <view class="station-name">{{ stationDetail.name }}</view>
      <view class="station-score">
        <text class="score">{{ stationDetail.score }}分</text>
        <text class="comment-count">({{ stationDetail.commentCount || 128 }}条评论)</text>
      </view>
      <view class="station-price">{{ stationDetail.price }}</view>
    </view>
    
    <!-- 电站详情 -->
    <view class="station-detail">
      <view class="detail-item">
        <text class="label">地址:</text>
        <text class="content">{{ stationDetail.address }}</text>
      </view>
      <view class="detail-item">
        <text class="label">营业时间:</text>
        <text class="content">{{ stationDetail.openTime }}</text>
      </view>
      <view class="detail-item">
        <text class="label">联系电话:</text>
        <text class="content phone">{{ stationDetail.phone }}</text>
      </view>
      <view class="detail-item">
        <text class="label">充电桩:</text>
        <view class="content">
          <text>直流{{ stationDetail.dcAvailableGunCount }}/{{ stationDetail.dcGunCount }}个</text>
          <text class="separator">|</text>
          <text>交流{{ stationDetail.acAvailableGunCount }}/{{ stationDetail.acGunCount }}个</text>
        </view>
      </view>
    </view>
    
    <!-- 地图位置 -->
    <view class="station-map">
      <view class="map-header">
        <text class="title">位置信息</text>
        <text class="navigate" @click="navigateTo">导航 ></text>
      </view>
      <view class="map-placeholder">
        <image class="map-img" src="/static/map/placeholder.png"></image>
      </view>
    </view>
    
    <!-- 充电桩列表 -->
    <view class="gun-section">
      <view class="section-title">充电桩列表</view>
      <view class="gun-list">
        <view class="gun-item" v-for="n in 6" :key="n" :class="{ 'gun-available': n <= 4 }">
          <text class="gun-code">A{{ n < 10 ? '0' + n : n }}</text>
          <text class="gun-status">{{ n <= 4 ? '空闲' : '占用' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="collect-btn">收藏</button>
      <button class="charge-btn" @click="startCharge">立即充电</button>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      stationId: 0,
      stationDetail: {
        images: [
          '/static/station/1.jpg',
          '/static/station/2.jpg'
        ],
        name: '',
        score: 0,
        address: '',
        price: '',
        openTime: '',
        phone: '',
        dcGunCount: 0,
        acGunCount: 0,
        dcAvailableGunCount: 0,
        acAvailableGunCount: 0
      }
    }
  },
  onLoad(options) {
    this.stationId = options.id || 1
    this.getStationDetail()
  },
  methods: {
    // 获取电站详情
    async getStationDetail() {
      try {
        const res = await api.station.getStationDetail(this.stationId)
        if (res.code === 200) {
          this.stationDetail = res.data
        }
      } catch (error) {
        console.error('获取电站详情失败:', error)
      }
    },
    
    // 导航到电站
    navigateTo() {
      uni.showToast({
        title: '打开地图导航',
        icon: 'none'
      })
    },
    
    // 开始充电
    startCharge() {
      uni.showToast({
        title: '开始充电流程',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 120rpx;
}

.station-swiper {
  height: 400rpx;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

.station-basic {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.station-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.station-score {
  margin-bottom: 10rpx;
}

.score {
  color: #ff9900;
  font-size: 28rpx;
  font-weight: bold;
}

.comment-count {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.station-price {
  font-size: 32rpx;
  color: #ff6600;
  font-weight: bold;
}

.station-detail {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 150rpx;
  font-size: 28rpx;
  color: #666;
}

.content {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.phone {
  color: #007aff;
}

.separator {
  margin: 0 10rpx;
  color: #ccc;
}

.station-map {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.navigate {
  color: #007aff;
  font-size: 28rpx;
}

.map-placeholder {
  height: 300rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-img {
  width: 100rpx;
  height: 100rpx;
}

.gun-section {
  background-color: #fff;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.gun-list {
  display: flex;
  flex-wrap: wrap;
}

.gun-item {
  width: 30%;
  margin-right: 5%;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  text-align: center;
}

.gun-item:nth-child(3n) {
  margin-right: 0;
}

.gun-available {
  background-color: #e8f4ff;
  border: 1rpx solid #007aff;
}

.gun-code {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.gun-status {
  font-size: 24rpx;
  color: #999;
}

.gun-available .gun-status {
  color: #007aff;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #f5f5f5;
}

.collect-btn {
  flex: 1;
  background-color: #f5f5f5;
  border: none;
  font-size: 32rpx;
  color: #666;
}

.charge-btn {
  flex: 2;
  background-color: #007aff;
  border: none;
  font-size: 32rpx;
  color: #fff;
}
</style>